<template>
	<div class="app-container">
	<div v-if="showList">
		<el-form :model="cond">
			<el-row :gutter="10">
				<el-col :span="4">
					<el-form-item label=企业中文名 label-width="100px">
						<el-input v-model="cond.companyChineseName" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="组织机构代码" label-width="120px">
						<el-input v-model="cond.simple.companyInstCode" placeholder="请输入内容" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="5">
					<el-form-item label="企业区域" label-width="80px">
						<el-cascader v-model="companyLocation" :options="region_options" collapse-tags
									 placeholder="请选择（默认全部）" clearable style="width: 100%;"
									 @change="fillJsonLocation" :props="{multiple: true}">
						</el-cascader>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="10" type="flex" justify="end">
				<el-col :span="2" :offset="6" align="right" >
					<el-button type="primary" @click="fetchData" icon="el-icon-search" size="medium">查询</el-button>
				</el-col>
				<el-col :span="2" align="right">
					<el-button type="info" @click="resetCond" icon="el-icon-refresh-left" size="medium">重置</el-button>
				</el-col>
				<el-col :span="2" align="right">
					<el-button type="info" @click="exportExcel" icon="el-icon-document" size="medium">导出</el-button>
				</el-col>
			</el-row>
		</el-form>
		<el-row>
			<el-col :span="24" align="right">
				<el-button type="text" style="font-size: 17px;"></el-button>
			</el-col>
		</el-row>

		<el-table v-loading="listLoading" :data="viewData" element-loading-text="Loading" border fit
				  highlight-current-row :cell-style="{padding:'5px 0'}" stripe>
			<el-table-column label="企业ID" align="center" :min-width="'4%'" :max-width="'8%'">
				<template slot-scope="scope">
					{{ scope.row.userId }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="企业名称" :min-width="'18%'" :max-width="'10%'">
				<template slot-scope="scope">
					{{ scope.row.companyChineseName}}
				</template>
			</el-table-column>
			<el-table-column label="所在城市" align="center" :min-width="'5%'" :max-width="'18%'">
				<template slot-scope="scope">
					{{ scope.row.companyCity }}
				</template>
			</el-table-column>
			<el-table-column label="组织机构代码" align="center" :min-width="'7%'" :max-width="'18%'">
				<template slot-scope="scope">
					{{ scope.row.companyInstCode }}
				</template>
			</el-table-column>
			<el-table-column label="企业性质" align="center" :min-width="'5%'" :max-width="'7%'">
				<template slot-scope="scope">
					{{ scope.row.companyNature }}
				</template>
			</el-table-column>
			<el-table-column label="企业行业" align="center" :min-width="'7%'" :max-width="'10%'">
				<template slot-scope="scope">
					{{ scope.row.companyIndustry }}
				</template>
			</el-table-column>
			<el-table-column label="企业电话" align="center" :min-width="'8%'" :max-width="'7%'">
				<template slot-scope="scope">
					{{ scope.row.companyPhone }}
				</template>
			</el-table-column>
			<el-table-column label="企业邮箱" align="center" :min-width="'10%'" :max-width="'10%'">
				<template slot-scope="scope">
					{{ scope.row.companyEmail }}
				</template>
			</el-table-column>
			<el-table-column fixed="right" align="center" label="操作" :min-width="'5%'" :max-width="'13%'">
				<template slot-scope="scope">
					<el-button @click="jump2DetailedInfo(scope.row)" ttype="primary" plain
					>详细信息
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" :current-page="page.currentPage"
					   :page-sizes="[10, 20, 50]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
					   :total="page.totalItems">
		</el-pagination>
	</div>
		<detailed-info v-if="showForm" :entry="entry"  @update-parameter="goBackShowList" >
		</detailed-info>
	</div>
</template>

<script>

import detailedInfo from './detailedInfo.vue';
import {exportCurrentFilingInfoList, getRequiredFilingInfoList} from "@/api/province/filingInfoQuery";
import {save} from "@/utils/download";
import {getLocations} from "@/api/enterprise/enterpriseRecord";
import th from "element-ui/src/locale/lang/th";

const defaultCond = {
	simple: {companyInstCode: null},
	companyCity: null,
	companyChineseName: null,
	companyLocation: []
}

export default {
	data() {
		return {
			list: [],
			viewData: [],
			listLoading: true,
			page: {
				currentPage: 1,
				pageSize: 10,
				totalItems: 0,
			},

			cond: JSON.parse(JSON.stringify(defaultCond)),
			companyLocation: null,

			showList: true,
			showForm: false,
			entry: null,

			region_options: getLocations()
		}
	},

	created() {
		this.fetchData()
		this.cond.companyCity = this.$store.getters.roleId === 2 ? this.$store.getters.userId : null
	},

	components: {
		'detailed-info': detailedInfo
	},

	methods: {
		fetchData() {
			this.listLoading = true
			getRequiredFilingInfoList(this.cond).then(response => {
					this.list = response.data.sort((a, b) => b.companyId - a.companyId)
					this.page.totalItems = this.list.length
					this.display()
					this.listLoading = false
				}
			)
		},

		resetCond() {
			this.cond = JSON.parse(JSON.stringify(defaultCond))
			this.companyLocation = null
		},

		display() {
			// console.log(this.list)
			this.viewData = this.list.slice((this.page.currentPage - 1) * this.page.pageSize, Math.min(this.page.totalItems, this.page.currentPage * this.page.pageSize))
			// console.log(this.viewData)
		},

		exportExcel(){
			exportCurrentFilingInfoList(encodeURIComponent(JSON.stringify(this.cond))).then(response =>{
				save(Date.now() + '.xlsx', response)
			})
		},

		goBackShowList(newValue) {
			this.showForm = newValue.sForm;
			this.showList = newValue.sList;
		},

		jump2DetailedInfo(entry) {
			this.showForm = true;
			this.showList = false;
			this.entry = entry;
		},

		changePageSize(val) {
			this.page.pageSize = val;
			this.display();
		},

		changeCurrentPage(val) {
			this.page.currentPage = val;
			this.display();
		},

		fillJsonLocation(){
			this.cond.companyLocation = []
			this.companyLocation.forEach(v => {this.cond.companyLocation.push(v.join("/"))})
		}
	},
}

</script>
